@mixin clearfix {
  $selector: &;

  @at-root {
    #{$selector}:before,
    #{$selector}:after {
      content: "\20";
      display: table;
    }

    #{$selector}:after {
      clear: both;
    }
  }
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin unselect {
  user-select: none;
}

@mixin anim($name: false) {
  @if $name {
    @at-root {
      @keyframes #{$name} {
        @content;
      }
    }
  }
}

@mixin respond($key, $map: $grid-breakpoints) {
  @if map-has-key($map, $key) {
    @media screen {
      @media #{inspect(map-get($map, $key))} {
        @content;
      }
    }
  }

  @else {
    @warn "Undefined points: `#{$map}`";
  }
}

@mixin hover-focus {
  &:hover,
  &:focus {
    @content;
  }
}

@mixin bg-variant($parent, $color) {
  #{$parent} {
    background-color: $color !important;
  }
  a#{$parent},
  button#{$parent} {
    @include hover-focus {
      background-color: darken($color, 10%) !important;
    }
  }
}

@mixin text-variant($parent, $color) {
  #{$parent} {
    color: $color !important;
  }
  a#{$parent} {
    @include hover-focus {
      color: darken($color, 10%) !important;
    }
  }
}

@mixin button-style($color, $background-color, $border-color) {
  color: $color;
  background-color: $background-color;
  border-color: $border-color;
  &:hover,
  &:focus {
    background-color: mix($color-white, $background-color, 20%);
    border-color: mix($color-white, $border-color, 20%);
    color: $color;
  }
  &:focus {
    background-color: $background-color;
    box-shadow: 0 0 0 3px rgba($background-color, .25);
  }
  &:active {
    background-color: mix($color-black, $background-color, 10%);
    border-color: mix($color-black, $border-color, 10%);
    color: $color;
    outline: none;
  }
  &:disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active {
      color: $color;
      background-color: mix($background-color, $color-white, 60%);
      border-color: mix($border-color, $color-white, 60%);
      box-shadow: none;
      cursor: not-allowed;
    }
  }
}